<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <title>Title</title>
</head>
<body>
    <div id="app">
        {{name}}</br>
        {{[1,2,3,4][2]}}</br>
        {{      {"tile":"vueDemo", "age": 18}.age   }}</br>
        {{ sayHello() }}
        <p v-if="flag">
            张三考试结果为10分
        </p>
        <p v-else-if="rich">
            张三考试结果为20分
        </p>
        <p v-else="rich">
            张三考试结果为30分
        </p>
        <p v-show="rich">
            有钱！
        </p>

        <ul>
            <li v-for="(x,i) in args" :key="i">索引为:{{i}} 数据为:{{x}}</li>
        </ul>
        <ul>
            <li v-for="(v,k,i) in student" >索引为:{{i}} ===key:{{k}}==== value:{{v}}</li>
        </ul>
        <div v-for="stu in students">
            <span v-for="(v,k,i) in stu">索引为:{{i}} === {{k}} ==== {{v}}</span>
        </div>
       </br>

        演示双向绑定: <input tyep="text" v-model="name">
        页面展示数据: {{name}}
        </br>
        跳转的网址:<input type="text" v-model="link">
        <a :href="link">跳转</a>
        </br>
        数据为:{{sum}} <input type="button" @click="incr(10)" value="累加">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                id: 1,
                name: "青龙",
                link: "http://www.baidu.com",
                age: 18,
                flag: false,
                rich: false,
                args:["青龙", "白虎", "朱雀", "玄武"],
                student:{
                    "id": 11111,
                    "name": "饕鬄",
                    "age" : 999
                },
                students:[
                    {
                        "id": 11111,
                        "name": "饕鬄",
                        "age" : 999
                    },
                    {
                        "id": 22222,
                        "name": "穷奇",
                        "age" : 999
                    },
                    {
                        "id": 33333,
                        "name": "混沌",
                        "age" : 999
                    },
                    {
                        "id": 444444,
                        "name": "梼杌",
                        "age" : 999
                    }
                ],
                sum: 0
            },
            methods:{
                sayHello:function(){
                    return "我喜欢学习Vue";
                },
                incr:function(s) {
                    this.sum += s;
                }
            }
        });
    </script>
</body>
</html>